<template>
  <div class="address-select-page">
    <van-nav-bar
      title="选择收货地址"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    
    <div class="address-list">
      <van-radio-group v-model="selectedId">
        <div
          v-for="address in sortedAddresses"
          :key="address.id"
          class="address-item"
          @click="selectAddress(address)"
        >
          <van-radio :name="address.id" />
          <div class="address-content">
            <div class="address-header">
              <span class="name">{{ address.name }}</span>
              <span class="phone">{{ address.tel }}</span>
              <van-tag v-if="address.isDefault" type="danger">默认</van-tag>
            </div>
            <div class="address-detail">
              {{ addressStore.fullAddress(address) }}
            </div>
          </div>
          <van-icon 
            name="edit" 
            class="edit-icon" 
            @click.stop="editAddress(address.id)"
          />
        </div>
      </van-radio-group>
      
      <div class="add-new-address" @click="goToAddAddress">
        <van-icon name="plus" size="18" />
        <span>添加新地址</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAddressStore } from '@/stores/address'
import { showToast } from 'vant'

const router = useRouter()
const addressStore = useAddressStore()

// 响应式数据
const selectedId = ref(null)
const isLoading = ref(false)

// 计算属性
const sortedAddresses = computed(() => addressStore.sortedAddresses)

// 初始化加载
const loadAddresses = async () => {
  try {
    isLoading.value = true
    // 如果store中没有地址，从localStorage加载
    if (addressStore.addresses.length === 0) {
      addressStore.initializeFromLocalStorage()
    }
    // 设置默认选中
    if (addressStore.selectedAddress) {
      selectedId.value = addressStore.selectedAddress.id
    } else if (addressStore.addresses.length > 0) {
      selectedId.value = addressStore.defaultAddress?.id || addressStore.addresses[0].id
    }
  } catch (error) {
    showToast('加载地址失败')
    console.error('加载地址失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 选择地址
const selectAddress = (address) => {
  addressStore.setSelectedAddress(address)
  showToast('地址已选择')
  router.back()
}

// 编辑地址
const editAddress = (id) => {
  router.push(`/address/edit?id=${id}`)
}

// 添加新地址
const goToAddAddress = () => {
  router.push('/address/edit')
}

// 监听地址变化
watch(
  () => addressStore.addresses,
  () => {
    if (addressStore.selectedAddress) {
      selectedId.value = addressStore.selectedAddress.id
    }
  },
  { deep: true }
)

// 组件挂载时加载地址
onMounted(() => {
  loadAddresses()
})
</script>

<style scoped>
.address-select-page {
  background-color: #f7f7f7;
  min-height: 100vh;
  padding-bottom: 20px;
  min-width: 78vh;
}

.address-list {
  padding: 10px;
}

.address-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.address-content {
  flex: 1;
  margin-left: 12px;
  padding-right: 20px;
}

.address-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.address-header .name {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  margin-right: 10px;
}

.address-header .phone {
  font-size: 13px;
  color: #666;
  margin-right: 8px;
}

.address-detail {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

.edit-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 16px;
  padding: 8px;
}

.add-new-address {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  margin-top: 10px;
  background: #fff;
  border-radius: 8px;
  color: #1989fa;
  font-size: 14px;
}

.add-new-address .van-icon {
  margin-right: 5px;
}

.loading-wrapper {
  display: flex;
  justify-content: center;
  padding: 20px;
}
</style>